import React from 'react'
import { connect } from 'react-redux'
import classnames from 'classnames'
import './gameBaseStyle.less'

const mapStateToProps = (state) => {
  return {
    currentGame: state.dynamics.currentGame
  }
}
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    closeCreateGame: () => dispatch(global.allActions.appActions.closeCreateGame()),
    confClicked: (index, value) => dispatch(global.allActions.appActions.confClicked({ index, value })),
    createGame: () => dispatch(global.allActions.appActions.createGame)
  }
}
class CreateGameBase extends React.Component<any, any> {
  public constructor(props) {
    super(props)
    this.state = {
      showRow: true
    }
  }

  public componentDidMount() {

  }

  parseJSON(params: string) {

    let json = null;
    try {
      json = JSON.parse(params)
    } catch (error) {
      console.log(error)
      json = 'error'
    }
    return json
  }
  public render() {
    const { currentGame, confClicked, createGame } = this.props
    console.log('currentGame',currentGame)
    const circleCn = classnames({
      'choose-circle-small': currentGame.config.options.length >= 7,
      'choose-circle': currentGame.config.options.length < 7
    })

    var tipText = this.parseJSON(currentGame.hintJson)
    if (tipText == 'error') {
      if (currentGame.gameName === '经典斗牛' || currentGame.gameName === '点子牛') {
        tipText = ['温馨提示:', '扣钻方式: 至少打完一回合,产生战绩后才扣钻', '中途加入: AA支付时,从第十六回合后的中途加入扣钻一个']
      } else if (currentGame.gameName === '斗公牛') {
        tipText = ['温馨提示:', '扣钻方式: 至少打完一回合,产生战绩后才扣钻', '中途加入: AA支付时,从第二轮开始后的中途加入扣钻一个']
      } else if (currentGame.gameName === '欢乐金花') {
        tipText = ['温馨提示:', `中途加入: AA支付时,玩家在回合过半后加入,扣钻数减半`]
      } else {
        tipText = ['温馨提示:', `扣钻方式: 第一回合打完,产生战绩后才扣钻`]
      }
    }
    const createBtnCls = classnames({
       "rule-row": true,
       "btn": true,
       "small-gap": currentGame.config.options.length > 9 
    })
    const modalClass = classnames({
      'modal-wrapper': true,
      'is-android': !!window.navigator.appVersion.match(/Android/i)
    })
    return (
      <div className="create-game-base">
        <img className="full pos-abs" src="./img/createGame/create-game-di.png?v=20181201" alt="" />
        <div className="full pos-abs modal">
          <div className="full-width title-wrapper">
            <img className="create-game-title" src="img/createGame/create-text.png?v=20181201" alt="" />
            <img onClick={this.props.closeCreateGame.bind(this)} className="close" src="img/createGame/close-btn.png?v=20181201" alt="" />
          </div>
          <div className={modalClass}>
            {
              currentGame.config.options.map((cData, index) => {
                if (cData._visible === false) {
                  return
                }
                const rowCn = classnames({ 'rule-row': true, 'pure-g': true, 'large-gap': currentGame.config.options.length <= 5, 'small-gap':  currentGame.config.options.length > 9})
                const half = cData.choice.some(choice => choice.label.length >= 10)
                {/*console.log(cData)*/ }
                const halfRulename = cData.name.length >= 6
                const choiceCn = classnames({ 'pure-u-3-4': true, 'pure-g': true, 'choice': true, 'half-font': half })
                const ruleCn = classnames({ 'rule-name color-blue': true, 'half-font': halfRulename })
                let threeChoices = cData.choice.length == 3 ? 'pure-u-1-3' : 'pure-u-1-2'
                if (cData.name == '局数') {
                  threeChoices = 'pure-u-1-2'
                }
                if (cData.key === 'maxBetPoint') {
                  if (currentGame.gameName == '经典斗牛' || currentGame.gameName == '点子牛' || currentGame.gameName == '斗公牛') {
                    const maxMultiple = currentGame.config.options.find(con => con.name === '固定倍数')
                    if(maxMultiple) {
                      if (maxMultiple.selected[0] !== -1) {
                        return 
                      }
                    }
                  }
                }
                if (cData.key === 'autoOnAccord') {
                  if (currentGame.gameName == '经典斗牛' || currentGame.gameName == '点子牛' || currentGame.gameName == '斗公牛') {
                    const maxMultiple = currentGame.config.options.find(con => con.name === '固定倍数')
                    if(maxMultiple) {
                      if (maxMultiple.selected[0] === -1) {
                        return 
                      }
                    }
                  }
                }

                if(cData.show ==='hide'){
                  return null;
                }

                if(cData.key == 'matchType') {
                  threeChoices = 'pure-u-1-1'
                }

                return  <div className={rowCn} key={index}>
                  <div className="pure-u-1-4">
                    <span className={ruleCn}>{cData.name}</span>
                  </div>
                  <div className={choiceCn}>
                    {
                      cData.choice.map((choice, choiceInd) => {

                        let multiImgSrc = cData.muti ? 'rect' : 'circle'
                        // let multiImgSrc = 'circle'
                        const selected = cData.selected.some(select => select === choice.value)
                        const imgSrc = selected ? `img/createGame/${multiImgSrc}-active.png?v=20181201` : `img/createGame/${multiImgSrc}-default.png?v=20181201`
                        const textCn = classnames({ 'choose-text': true, 'orange': selected })
                        // 如果是turns
                        var append = ''
                        if (cData.key === 'turns') {
                          const payTypeChoice = currentGame.config.options.find(con => con.name === '支付方式')

                          let showPay = currentGame.config.payTypeInfo.find(info => info.value === payTypeChoice.selected[0])
                          if (currentGame.gameName == '跑得快') {
                            const pNum = currentGame.config.options.find(con => con.name === '人数')
                            if (pNum.selected[0] == 3 && payTypeChoice.selected[0] == 2) {
                              showPay = currentGame.config.payTypeInfo[2]
                            }
                          }
                          if (currentGame.gameName == '经典斗牛' || currentGame.gameName == '点子牛' || currentGame.gameName == '斗公牛') {
                            const pNum = currentGame.config.options.find(con => con.name === '最大人数')
                            if (pNum.selected[0] == 10 && payTypeChoice.selected[0] == 2) {
                              showPay = currentGame.config.payTypeInfo[2]
                            }
                          }
                          const showData = showPay.choice.find(show => show.id === choice.value)
                          append = showData.data
                        }

                       
                        return <div className={threeChoices} key={choiceInd} onClick={confClicked.bind(this, index, choice.value)}>
                          <img src={imgSrc} className={circleCn} alt="" />
                          <span className={textCn}>{choice.label + append}</span>
                        </div>
                      })
                    }
                  </div>
                  <img src="img/app/create-line.png?v=20181201" className="rule-bottom-line" alt="" />
                </div>
              })
            }
            <div className={createBtnCls}>
              <div className="start-game-btn" onClick={createGame.bind(this)}></div>
            </div>
            <div className="rule-row create-tip-wrapper">
              {tipText.map((text, index) => (
                <p key={index} className="create-tip">{text}</p>
              ))}
            </div>
          </div>
        </div>
      </div>
    )
  }

}

export default connect(mapStateToProps, mapDispatchToProps)(CreateGameBase)